<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<title>
relative+absolute四个圆角容器实现
</title>
		<style type="text/css">
			.box {
				background:#E4E4E1 none repeat scroll 0 0;
				position:relative;
			}
			.box sup.l {
				background-position:-8px -232px;
			}
			.box .l {
				left:0;
			}
			.box sup {
				top:0;
			}
			.box sup, .box sub {
				background:transparent url(mix_nr.gif) no-repeat scroll 0 0;
				display:block;
				height:8px;
				overflow:hidden;
				position:absolute;
				width:8px;
			}
			
			.box sub.r {
				background-position:0 -252px;
			}
			.box .r {
				right:0;
			}
			.box sub {
				bottom:0;
			}
			.box sup, .box sub {
				background:transparent url(mix_nr.gif) no-repeat scroll 0 0;
				display:block;
				height:8px;
				overflow:hidden;
				position:absolute;
				width:8px;
			}
			.box sub.l {
				background-position:-8px -252px;
			}
			.box .l {
				left:0;
			}
			.box sup.r {
				background-position:0 -232px;
			}
			.box .r {
				right:0;
			}
			p {margin:0;padding:0;padding:10px;}
		</style>
	</head>
	<body>
		<p>
			描述：主盒子设置relative，内部增加四个absolute圆角结构，并设置其各自的相对位置，通过填充背景图片或者1-2象素绘制实现。<br/>
优点：<br/>
　　文档相对语义化；<br/>
　　控制灵活；<br/>
缺点：<br/>
　　IE6会有主盒子宽高为奇数时右底边线多出1px的bug(可通过固定宽高/增加容器的方法解决)；<br/>
　　线框中复杂边框（如阴影）需要增加额外容器；<br/>
　　css代码较多；<br/>
			</p>
	
<div class="box" >
<sup class="r"></sup><sup class="l"></sup>
<div class="box_bd">
<p>图片圆角色块</p>
<p>使用4个sup和sub作为边脚，通过background-image布置圆角</p>
<p>但是在IE6下有父容器宽度或高度为奇数时的bug</p>
<p>底部或右侧会多出1px</p>
</div>
<sub class="r"></sub><sub class="l"></sub>
</div>


		
	</body>
</html>
